<div id="app">
    <!-- 
        1.axios 的返回值是一个 Promise
        2.可以通过 then 对 Promise 进行接收
        3.也可以通过 async await 对 Promise 进行接收（简化）
        4.可以通过 {} 对返回值进行解构赋值，将 data 单独解构出来，并使用 : 进行重命名
     -->
    <button @click="btnGet()">发起GET请求</button>
    <button @click="btnPost()">发起POST请求</button>

    <!-- 
        axios.get
        axios.post
     -->
    <button @click="btnGet1()">通过axios.get发起GET请求</button>
    <button @click="btnPost2()">通过axios.post发起POST请求</button>
</div>
<script src="./lib/axios.js"></script>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        methods: {
            btnGet() {
                const result = axios({
                    // 请求方式
                    method: 'GET',
                    // 请求地址
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    // GET：url 中的查询参数
                    params: {},
                })

                // 1.axios 的返回值是一个 Promise
                console.log(result)

                // 2.可以通过 then 进行接收
                result.then((books) => {
                    console.log(books)
                })
            },
            // 3.也可以通过 async await 进行接收
            async btnPost() {
                // 4.可以通过 {} 对返回值进行解构赋值，使用 : 进行重命名
                const { data: res } = await axios({
                    // 请求方式
                    method: 'POST',
                    // 请求地址
                    url: 'http://www.liulongbin.top:3006/api/post',
                    // GET：url 中的查询参数
                    params: {},
                    // POST：请求体参数
                    data: {
                        name: 'zs',
                        age: 20
                    }
                })

                console.log(res.body)
            },

            // axios.get
            async btnGet1() {
                const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
                    // GET：url 中的查询参数
                    params: { id: 1 },
                })

                console.log(res)
            },

            // axios.post
            async btnPost2() {
                const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', {
                    name: 'zs',
                    age: 20
                })

                console.log(res.body)
            },

        }
    })
</script>